<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Cell 单元格"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <demo-block title="基础用法">
      <hips-group>
        <hips-cell
          title="标题"
          value="内容"
        />
        <hips-cell
          title="标题"
          value="内容"
          description="跳转到百度首页 https://www.baidu.com"
          value-align
          is-link
          url="https://www.baidu.com"
        />
      </hips-group>
    </demo-block>

    <demo-block title="只设置 value">
      <hips-group>
        <hips-cell
          value="这是一段只设置了value属性的内容，居左显示（有title属性时居右显示）"
        />
      </hips-group>
    </demo-block>

    <demo-block
      title="展示图标"
      class="title3-block"
    >
      <hips-group>
        <hips-cell
          title="标题"
          value="内容"
          icon="photo"
          clickable
        >
          <hips-icon
            slot="right-icon"
            name="edit"
            class="hips-cell__right-icon"
          />
        </hips-cell>
      </hips-group>
    </demo-block>

    <demo-block title="高级用法">
      <hips-group>
        <hips-cell
          value="内容"
          icon="el-icon-star-off"
          is-link
        >
          <template slot="title">
            <span class="hips-cell-text"> 标题 </span>
            <hips-badge
              type="error"
              value="10"
            />
          </template>

          <template slot="value">
            <span class="hips-cell-text"> 内容 </span>
            <hips-badge
              type="error"
              value="10"
            />
          </template>
        </hips-cell>
      </hips-group>
    </demo-block>

    <demo-block
      title="使用 custom 插槽 (自定义内容)"
      class="title4-block"
    >
      <hips-group>
        <hips-cell clickable>
          <template slot="custom">
            <span class="hips-cell-text"> 这里是自定义内容 </span>
          </template>
        </hips-cell>
      </hips-group>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Cell, Group, Icon, Badge } from '@hips/vue-ui';

export default {
  components: {
    [Cell.name]: Cell,
    [Group.name]: Group,
    [Icon.name]: Icon,
    [Badge.name]: Badge,
  },
  mixins: [ BasicView ],
};
</script>

<style scoped lang="stylus"></style>
